<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>axios基本使用</title>
  </head>
  <body>
    <button id="btn1">点击发送 GET 请求</button>
    <button id="btn2">点击发送 GET 请求(async 和 await)</button>
    <button id="btn3">点击发送 POST 请求</button>
    <button id="btn4">点击发送 PUT 请求</button>
    <button id="btn5">点击发送 DELETE 请求</button>

    <!-- 引入axios -->
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.27.2/axios.min.js"></script>
    <script>
      /* 
      - axios(config)  config为配置对象 => 对象内的属性/方法是固定的一些
        url  请求地址   可以包含param和query参数
        method 请求方式
        data  请求体参数
          值为对象: json格式
          a=1&b=2: query字符串格式
        params: query参数    不是用来指定param参数
      - 返回值是promise对象
          如果成功了, value是response对象
            data: 响应体数据(已经解析好了)
            status: 响应状态码
          如果失败了, reason是error对象
            message: 错误信息
      */

      document.getElementById('btn5').onclick = async () => {
        // 发delete请求 + async & await
        try {
          const response = await axios({
            url: 'http://localhost:3000/movie/7', // 指定param参数
            method: 'delete'
          })
          console.log(response)
          alert(JSON.stringify(response.data))
        } catch (error) {
          console.log(error)
          alert(error.message)
        }
      }

      document.getElementById('btn4').onclick = async () => {
        // 发PUT请求 + async & await
        try {
          const response = await axios({
            url: 'http://localhost:3000/movie/7', // 指定param参数
            method: 'PUT',
            data: {  // json格式请求体
              name: "220213电影",
              director: "220213导演"
            },
          })
          console.log(response)
          alert(JSON.stringify(response.data))
        } catch (error) {
          console.log(error)
          alert(error.message)
        }
      }

      document.getElementById('btn3').onclick = async () => {
        // 发POST请求 + async & await
        try {
          const response = await axios({
            url: 'http://localhost:3000/movie',
            method: 'POST',
            data: {  // json格式请求体
              name: "某某电影",
              director: "某某导演"
            },
            data: 'name=某某电影2&director=某某导演2' // query字符串格式请求体
          })
          console.log(response)
          alert(JSON.stringify(response.data))
        } catch (error) {
          console.log(error)
          alert(error.message)
        }
      }

      document.getElementById('btn2').onclick = async () => {
        // 发get请求 + async & await
        try {
          const response = await axios('http://localhost:3000/movie2')
          console.log(response)
          alert(JSON.stringify(response.data))
        } catch (error) {
          console.log(error)
          alert(error.message)
        }
      }
      
      // 绑定点击监听
      document.getElementById('btn1').onclick = function () {
        // http://localhost:3000/movie
        // http://localhost:3000/movie/1
        // http://localhost:3000/movie?id=1

        // 使用axios发请求

        // axios({ // 发GET请求不带参数
        //   url: 'http://localhost:3000/movie',
        //   method: 'GET', // 默认值就是get
        // })

        // axios({ // 发GET请求带param参数
        //   url: 'http://localhost:3000/movie/1'
        // })

        // axios({ // 发GET请求带query参数
        //   // url: 'http://localhost:3000/movie?id=1'
        //   url: 'http://localhost:3000/movie',
        //   params: { // 指定query参数, 而不是param参数
        //     id: 1
        //   }
        // })

        axios('http://localhost:3000/movie') // 发get请求的简洁写法, 一般不带query参数时使用
        
        .then(
          response => { // 请求成功的回调
            console.log(response)
            alert(JSON.stringify(response.data))
          },
          error => { // 请求失败的回调
            console.log(error)
            alert(error.message)
          }
        )
      }
    </script>
  </body>
</html>
